﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProductList_Grid.ascx.cs"
    Inherits="TelerikStore.Views.ProductList_Grid" %>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        var loadingPanel;
        var grid;
        var rowHeight = 80;
        var pageSize = 5;
        var pageScrollHeight = rowHeight * pageSize;
        var gridContainer;

        function gridDataBinding(sender, args)
        {
            loadingPanel.show(gridContainer);
        }

        function gridDataBound(sender, args)
        {
            loadingPanel.hide(gridContainer);
        }

        function gridCreated(sender, args)
        {
            grid = sender;
            grid.GridDataDiv.style.overflow = "hidden";
            loadingPanel = $find('<%= (this.NamingContainer.FindControl("LoadingPanel") as RadAjaxLoadingPanel).ClientID %>');
            gridContainer = '<%= this.NamingContainer.FindControl("DisplayPlaceHolder").ClientID %>';
            grid.get_masterTableView().getColumnByUniqueName("Image")._data.DataImageUrlFormatString = "{0}";
        }

        function prevClicked(sender, args)
        {
            var scrollTop = grid.GridDataDiv.scrollTop;
            if (scrollTop <= pageScrollHeight)
                scrollTop = 0;
            else
                scrollTop -= pageScrollHeight;
            grid.GridDataDiv.scrollTop = scrollTop;
        }

        function nextClicked(sender, args)
        {
            var scrollTop = grid.GridDataDiv.scrollTop;
            if (scrollTop >= grid.GridDataDiv.scrollHeight - pageScrollHeight)
                scrollTop = grid.GridDataDiv.scrollHeight - pageScrollHeight;
            else
                scrollTop += pageScrollHeight;
            grid.GridDataDiv.scrollTop = scrollTop;
        }

        function gridRowClick(sender, args)
        {
            var prodId = args.getDataKeyValue("Id");
            var conditionId = $telerik.findControl(document, "ConditionComboBox").get_value();
            var minPrice = $telerik.findControl(document, "StartRange").get_value();
            var maxPrice = $telerik.findControl(document, "EndRange").get_value();
            var searchValue = $telerik.findControl(document, "SearchBox").get_value();
            var categoryValue = $telerik.findControl(document, "QuickCategoryMenu").get_selectedItem().get_value();
            var redirectUrl = String.format("./ProductView.aspx?Condition={0}&MinPrice={1}&MaxPrice={2}&ItemID={3}", conditionId, minPrice, maxPrice, prodId);
            if (searchValue.length > 0)
                redirectUrl += "&Search=" + searchValue;
            if (categoryValue.length > 0)
                redirectUrl += "&Category=" + categoryValue;
            loadingPanel.show(gridContainer);
            window.location = redirectUrl;
        }

        function addItemToCart(sender)
        {
            var gridItems = grid.get_masterTableView().get_dataItems();
            var parentRow = sender.parentNode.parentNode;
            var gridItem = gridItems[parentRow.id.split("__")[1]];
            $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("AddToCart|" + gridItem.getDataKeyValue("Id"));
            return false;
        }

        function gridRowDataBound(sender, args)
        {
            var cell = args.get_item().get_cell("AddToCartColumn");
            if (cell.innerHTML.trim().length < 1)
            {
                cell.innerHTML = "<a id='AddToCartButton' href='#' onclick='addItemToCart(this);return false;'>Add to Cart</a>";
            }
        }
    </script>
</telerik:RadScriptBlock>
<telerik:RadGrid runat="server" ID="ProductGrid" CssClass="oDataGrid" AutoGenerateColumns="false"
    EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
    <MasterTableView CommandItemDisplay="Bottom" DataKeyNames="Id" ClientDataKeyNames="Id">
        <Columns>
            <telerik:GridImageColumn DataImageUrlFields="GalleryUrl" HeaderStyle-Width="125px"
                UniqueName="Image" ImageHeight="65px" />
            <telerik:GridBoundColumn DataField="Title" HeaderText="Title" />
            <telerik:GridBoundColumn UniqueName="Price" DataField="CurrentPrice" HeaderText="Price"
                DataFormatString="{0:n}">
                <HeaderStyle Width="90px" />
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="AddToCartColumn" HeaderStyle-Width="80px">
                <ItemTemplate>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
        <CommandItemTemplate>
            <div class="paging simple-paging">
                <telerik:RadButton ID="PrevButton" runat="server" CssClass="prev" AutoPostBack="false"
                    OnClientClicked="prevClicked">
                </telerik:RadButton>
                <telerik:RadButton ID="NextButton" runat="server" CssClass="next" AutoPostBack="false"
                    OnClientClicked="nextClicked">
                </telerik:RadButton>
            </div>
        </CommandItemTemplate>
    </MasterTableView>
    <ClientSettings>
        <ClientEvents OnDataBound="gridDataBound" OnDataBinding="gridDataBinding" OnGridCreated="gridCreated"
            OnRowClick="gridRowClick" OnRowDataBound="gridRowDataBound" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="400px" />
        <DataBinding Location="http://ebayodata.cloudapp.net" ResponseType="JSONP">
            <DataService Type="OData" TableName="Items" />
        </DataBinding>
    </ClientSettings>
    <PagerStyle AlwaysVisible="true" Mode="NumericPages" CssClass="paging numeric-paging" />
</telerik:RadGrid>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"
    Transparency="50" />
<input type="hidden" id="BuyCurrentPrice" />
